<script setup>
 import {ref,onMounted} from 'vue'
 import {roleNumsApi} from '../../../api/stat'

 const option=ref({
    title:{
        text:"角色用户人数统计", //主标题
        textStyle:{color:"red"},
        left:"40",
        top:10
    },
    tooltip: {
    trigger: 'item'
  },
  toolbox: {
        show: true,
        feature: {
        saveAsImage: {} //下载
        }
    },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '当前数据是：',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
})

onMounted(()=>{
    loadData()
})
const resetRef=ref({})
const loadData= async()=>{
    const r=await roleNumsApi()
    option.value.series[0].data=r.data
    //重新渲染一下组件
    resetRef.value.reset()

}
</script>

<template>
<Box>
    
    <div>
        <Chart ref="resetRef" class="ct1" :option="option"/>
    </div>
</Box>

</template>

<style scoped>
.ct1{
    width:100%;
    height: 400px;

}
</style>